<!-- 水位柱状图 -->
<template>
    <echarts :option="option" class="waterBar" ref="waterBar" id="waterBar"/>
</template>

<script>
import echarts from '@/components/echarts/echarts';
export default {
	name: 'water-bar',
	data () {
		return {
			img1: require('@/assets/images/waterPic1.png'),
			img2: require('@/assets/images/waterPic2.png'),
			barData: [{
				name: '总量',
				num: 20
			},
			{
				name: '未接收',
				num: 50
			},
			{
				name: '已接收',
				num: 80
			},
			{
				name: '已受理',
				num: 80
			},
			{
				name: '已办结',
				num: 80
			}
			],
			option: {}
		};
	},

	components: {
		echarts
	},

	computed: {},

	mounted () {
		this.barConfig(this.barData, document.getElementById('waterBar'));
	},
	methods: {
		barConfig (data, dom) {
			const color1 = {
				type: 'linear',
				colorStops: [
					{
						offset: 0,
						color: 'rgb(27,124,177)',
					},
					{
						offset: 0.2,
						color: 'rgb(23,196,230)',
					},
					{
						offset: 0.5,
						color: 'rgb(6,120,221)',
					},
					{
						offset: 0.8,
						color: 'rgb(27,196,227)',
					},
					{
						offset: 1,
						color: 'rgb(43,113,164)',
					},
				],
			};
			const color2 = {
				type: 'radial',
				colorStops: [
					{
						offset: 0,
						color: 'rgba(13,47,85,.8)',
					},
					{
						offset: 0.5,
						color: 'rgba(33,74,118,.8)',
					},
					{
						offset: 1,
						color: 'rgba(33,74,118,.8)',
					},
				],
			};
			const xLabelData = [];
			const bgData = [];
			const innerData = [];
			data.forEach((item) => {
				xLabelData.push(item.name);
				innerData.push(item.num);
				bgData.push(100);
			});
			const innerTopData = (_data) => {
				const arr = [];
				const height = (dom.clientHeight - 126) / 100;
				_data.forEach((item) => {
					if (item * height > 20) {
						arr.push({
							value: item,
						});
					} else {
						arr.push({
							value: item,
							symbolOffset: [0, -25 + item * height],
						});
					}
				});
				return arr;
			};
			this.option = {
				// title: {
				// 	text: '「 水柱图 」',
				// 	textStyle: {
				// 		color: '#52def1'
				// 	},
				// 	top: 10,
				// 	left: 'center',
				// },
				grid: {
					top: 40,
					left: 25,
					bottom: 30,
					right: 25,
					containLabel: true,
				},
				xAxis: [{
					data: xLabelData,
					axisTick: {
						show: false,
					},
					axisLine: {
						lineStyle: {
							color: 'rgb(2,185,208)',
						},
					},
					axisLabel: {
						color: 'rgb(2,219,227)',
						fontWeight: 'bold',
					},
				},
				{
					type: 'category',
					show: true,
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						interval: 0,
						margin: 10,
						color: '#fff',
						fontSize: '10',
					},
					data: innerData,
				}
				],
				yAxis: {
					axisTick: {
						show: true,
					},
					splitLine: {
						show: false,
					},
					axisLine: {
						lineStyle: {
							color: 'rgb(2,185,208)',
						},
					},
					axisLabel: {
						color: 'rgb(2,219,227)',
						fontWeight: 'bold',
					},
					splitNumber: 10,
				},
				series: [
					{
						// 蓝色柱子
						type: 'pictorialBar',
						itemStyle: {
							color: color1,
						},
						symbol: 'rect',
						symbolClip: true,
						symbolSize: [20, '100%'],
						symbolOffset: [0, -20],
						symbolPosition: 'start',
						z: 5,
						animation: false,
						data: innerData,
					},
					{
						// 蓝色柱子顶部椭圆
						type: 'pictorialBar',
						itemStyle: {
							color: 'rgb(51,255,207)'
						},
						symbolSize: [20, 10],
						symbolOffset: [0, -5],
						symbolPosition: 'end',
						z: 6,
						animation: false,
						data: innerTopData(innerData),
					},
					{
						// 蓝色柱子底部椭圆
						type: 'pictorialBar',
						itemStyle: {
							color: color1,
						},
						symbolSize: [20, 10],
						symbolOffset: [0, -15],
						symbolPosition: 'start',
						z: 5,
						animation: false,
						data: innerData,
					},
					{
						// 满的背景柱子
						type: 'pictorialBar',
						symbol: 'image://' + this.img1,
						symbolClip: true,
						// symbolSize: [20, dom.$el.clientHeight - 136],
						symbolSize: [20, '100%'],
						symbolOffset: [0, -20],
						symbolPosition: 'start',
						z: 2,
						animation: false,
						data: bgData,
					},
					{
						// 满的顶部椭圆
						type: 'pictorialBar',
						itemStyle: {
							color: color2,
						},
						symbolSize: [20, 10],
						symbolOffset: [0, -5],
						symbolPosition: 'end',
						z: 3,
						animation: false,
						data: bgData,
					},
					{
						// 底部投影
						type: 'pictorialBar',
						symbol: 'image://' + this.img2,
						symbolSize: [40, 20],
						symbolOffset: [0, -8],
						symbolPosition: 'start',
						z: 2,
						animation: false,
						data: bgData,
					},
				],
			};
		}
	}
};

</script>
<style lang='less' scoped>
    .waterBar{
        width:100%;
        height:100%
    }
</style>
